<template>
	<div>
		<ul class="language-ul">
			<li
				v-for="(language,index) in languages"
				@click="changeLanguage(language.name)"
				:key="language.displayName+index"
			>
				<Tooltip :content="language.displayName" placement="bottom">
					<a>
						<i :class="language.icon"></i>
					</a>
				</Tooltip>
			</li>
		</ul>
	</div>
</template>
<script lang="ts">
	import { Component } from "vue-property-decorator";
	import Utils from "../core/utils/Utils";
	import AppConst from "../core/utils/const";
	import AppBase from "../core/utils/AppBase";
	@Component
	export default class LanguageSwitch extends AppBase {
		get languages() {
			return Utils.abp.localization.languages.filter(val => {
				return (
					!val.isDisabled && val.displayName != this.currentLanguage.displayName
				);
			});
		}
		changeLanguage(languageName: string) {
			Utils.setCookieValue(
				AppConst.cultureName,
				languageName,
				new Date(new Date().getTime() + 5 * 365 * 86400000), //5 year
				Utils.abp.appPath,
				""
			);
			location.reload();
		}
		get currentLanguage() {
			return Utils.abp.localization.currentLanguage;
		}
	}
</script>
<style>
	.language-ul {
		text-align: center;
		margin-top: 10px;
	}
	.language-ul li {
		display: inline;
		margin: 2px;
	}
	.famfamfam-flags {
		display: inline-block;
	}
</style>


